<template>
	<view class="popup-list">
		<view class="cont">
			<picker style="width: 100%;" :style="{'line-height':lineHeight,'text-align':textAlign}" mode="multiSelector"
				@change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
				:range="multiArray">
				<view class="" v-if="type==3">
					<image class="iconImg" referrerpolicy="no-referrer" src="/static/editor.png">
					</image>
				</view>
				<view class="uni-input" v-else>{{ time== '' ? '请选择日期' : time}}</view>
			</picker>
		</view>
	</view>
</template>

<script>
	const years = [];
	const months = [];
	const days = [];
	const hours = [];
	const minutes = [];
	const miao = [];
	export default {
		name: 'sun-pickerDateTime',
		props: {
			/**
			 * 1~6
			 */
			column: {
				type: Number,
				default: () => 6
			},
			type: {
				type: Number,
				default: false,
			},
			showclear: {
				type: Boolean,
				default: false,

			},
			/**
			 * center left right
			 */
			textAlign: {
				type: String,
				default: 'center'
			},
			/**
			 * 所有像素单位
			 */
			lineHeight: {
				type: String,
				default: '60rpx'
			},
			/**
			 * 开始年份
			 */
			startYear: {
				type: Number,
				default: () => new Date().getFullYear()
			},
			/**
			 * 总年度
			 */
			annual: {
				type: Number,
				default: () => 10
			},
		},
		data() {
			return {
				multiIndex: [0, 0, 0, 0, 0, 0],
				multiArray: [years, months, days, hours, minutes, miao],
				time: '',
				choose_year: '',
				default_column: 6
			}
		},
		watch: {
			showclear(newValue, oldValue) {
				// 当parentValue变化时，这个函数会被调用
				console.log(`Value changed from ${oldValue} to ${newValue}`);
				this.time = ''
			}
		},
		onLoad() {
			// console.log('111111', this.type)
		},
		mounted() {
			// console.log('type3344', this.type, this.showclear)

		},
		/**
		 * 实例初始化完成 最早可操作 data 中数据 和 methods 中方法的地方
		 */
		created() {
			const date = new Date();
			console.log(this.startYear)
			if (this.default_column !== this.column) {
				this.multiArray.splice(this.column, this.default_column - this.column);
				this.multiIndex.splice(this.column, this.default_column - this.column);
			}
			//获取年
			for (let i = this.startYear; i <= this.startYear + this.annual; i++) {
				years.push("" + i);
			}
			this.choose_year = this.multiArray[0][0]
			if (this.column === 1) return false;
			//获取月份
			for (let i = 1; i <= 12; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				months.push("" + i);
			}
			if (this.column === 2) return false;
			//获取日期
			for (let i = 1; i <= 31; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				days.push("" + i);
			}
			if (this.column === 3) return false;
			//获取小时
			for (let i = 0; i < 24; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				hours.push("" + i);
			}
			if (this.column === 4) return false;
			//获取分钟
			for (let i = 0; i < 60; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				minutes.push("" + i);
			}
			if (this.column === 5) return false;
			//获取秒
			for (let i = 0; i < 60; i++) {
				if (i < 10) {
					i = "0" + i;
				}
				miao.push("" + i);
			}
		},
		/**
		 * 方法函数
		 */
		methods: {
			//获取时间日期
			bindMultiPickerChange: function(e) {
				const _that = this;
				_that.multiIndex = e.detail.value;
				const index = _that.multiIndex;
				const year = _that.multiArray[0][index[0]];
				_that.time = year
				if (_that.column === 1) return false;
				const month = _that.multiArray[1][index[1]];
				_that.time = _that.time + '-' + month
				if (_that.column === 2) return false;
				const day = _that.multiArray[2][index[2]];
				_that.time = _that.time + '-' + day
				if (_that.column === 3) return false;
				const hour = _that.multiArray[3][index[3]];
				_that.time = _that.time + ' ' + hour
				if (_that.column === 4) return false;
				const minute = _that.multiArray[4][index[4]];
				_that.time = _that.time + ':' + minute
				if (_that.column === 5) return false;
				const miao = _that.multiArray[5][index[5]];
				_that.time = _that.time + ':' + miao
				_that.$emit("time", _that.time)
				// console.log('111111', that.type)
				// console.log('333333333', _that.time)
			},
			//监听picker的滚动事件
			bindMultiPickerColumnChange: function(e) {
				const _that = this;
				//获取年份
				if (e.detail.column == 0) {
					_that.choose_year = _that.multiArray[e.detail.column][e.detail.value];
				}
				if (_that.column < 3) return false;
				if (e.detail.column == 1) {
					let num = parseInt(_that.multiArray[e.detail.column][e.detail.value]);
					let temp = [];
					if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num ==
						12) { //判断31天的月份
						// for (let i = 1; i <= 31; i++) {
						// 	if (i < 10) {
						// 		i = "0" + i;
						// 	}
						// 	temp.push("" + i);
						// }
						return false;
					} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
						for (let i = 1; i <= 30; i++) {
							if (i < 10) {
								i = "0" + i;
							}
							temp.push("" + i);
						}
					} else if (num == 2) { //判断2月份天数
						let year = parseInt(_that.choose_year);
						if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
							for (let i = 1; i <= 29; i++) {
								if (i < 10) {
									i = "0" + i;
								}
								temp.push("" + i);
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								if (i < 10) {
									i = "0" + i;
								}
								temp.push("" + i);
							}
						}
					}
					_that.multiArray[2] = temp
					_that.$forceUpdate();
				}
			}
		},
	}
</script>
<style>
	.popup-list {
		margin: 0 40rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.popup-list .cont {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-list .cont uni-picker {
		width: 100%;
	}

	.popup-list .cont .uni-view {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.popup-list .cont .uni-view .uni-input {
		width: 118px;
		height: 44px;
		background: #F7F8FA;
		border-radius: 10px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #727A8E;
		line-height: 44px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 10rpx;
	}

	.popup-list .cont .uni-view .uni-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #727A8E;
	}

	.popup-list .foot {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: 400;
		font-size: 14px;
		color: #666666;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: center;
	}

	.popup-list .foot .text {
		width: 50%;
		text-align: center;
	}

	.popup-list .foot .text:nth-of-type(1) {
		border-right: 1px solid #eee;
	}

	.iconImg {
		width: 18px;
		height: 18px;
	}
</style>
